<template>
	<view class="u-p-30">
		<view class="notice-item" v-for="(item, i) in list" :key="i">
			<view class="notice-time">
				{{$moment(item.lastModifyTime).format('YYYY-MM-DD HH:mm:ss')}}
			</view>
			<view class="notice-box" @click="toNotice(item)">
				<view class="u-flex u-m-b-30">
					<view class="notice-icon">
						<u-image width="52rpx" height="52rpx" src="/static/icons/notice-item-icon.png"></u-image>
						<u-badge :is-dot="true"
							:offset="[0, 0]"
							:count="item.isRead?0:1"></u-badge>
					</view>
					<view class="notice-title u-flex-1 u-p-l-20 u-line-1">
						{{item.title}}
					</view>
				</view>
				<view class="notice-content">
					发布人：{{item.creatorUser}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				total: 0,
				currentPage: 1
			}
		},
		methods: {
			loadList() {
				this.$u.api.getNoticeList({
					pageSize: 10, //每页行数
					currentPage: this.currentPage, //当前页
					type: '1' //公告
				}).then(res => {
					this.list = res.list
				}).catch(err => {
					console.log(err)
				})
			},
			toNotice(pItem) {
				pItem.isRead = 1
				this.$u.route('pages/message/messagecenter/notice', {id: pItem.id})
			}
		},
		onLoad() {
			this.loadList()
		}
	}
</script>

<style lang="scss" scoped>
	.notice-time {
		padding: 20rpx;
		text-align: center;
		font-size: 26rpx;
		color: #999999;
	}
	.notice-box {
		padding: 40rpx 30rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		.notice-icon {
			position: relative;
		}
		.notice-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
		.notice-content {
			font-size: 28rpx;
			color: #666666;
		}
	}
</style>
